<template>
    <show-modal :title="title" :loading="loading" width="440px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="通知编码" prop="notifyCode">
                <a-input v-model="form.notifyCode" :disabled="form.ruleId?true:false" placeholder="请输入通知编码" />
            </a-form-model-item>
            <a-form-model-item label="通知名称" prop="notifyName">
                <a-input v-model="form.notifyName" placeholder="请输入通知名称" />
            </a-form-model-item>
            <a-form-model-item label="报警类型" prop="alarmType">
                <a-select v-model="form.alarmType" placeholder="请选择报警类型">
                    <a-select-option :value="level.value" v-for="(level,index) in alarmTypes" :key="index">{{level.label}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="通知模板" prop="templateCode">
                <a-select v-model="form.templateCode" show-search placeholder="请选择通知模板">
                    <a-select-option :value="template.templateCode" v-for="template in templateList" :key="template.templateCode">{{template.templateName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="通知人员" prop="relaUser">
                <a-select v-model="form.relaUser" show-search mode="multiple" optionFilterProp="name" :max-tag-count="4" placeholder="请选择通知人员">
                    <a-select-option :value="user.userId+''" :name="user.userName+user.userId" v-for="user in userList" :key="user.userId">{{user.userName}}</a-select-option>
                </a-select>
            </a-form-model-item>
            <!-- <a-form-model-item label="关联设备" prop="deviceCode">
                <a-input v-model="form.devicesString" @click="isShow=true" placeholder="请选择关联设备" />
            </a-form-model-item> -->
            <!-- <a-form-model-item label="报警限值" prop="threshold">
                <a-input v-model="form.threshold" placeholder="请输入报警限值" />
            </a-form-model-item>
            <a-form-model-item label="关联字段" prop="relationField">
                <a-select v-model="form.relationField" show-search placeholder="请选择关联字段">
                    <a-select-option :value="param.parameterCode" v-for="param in paramList" :key="param.parameterCode">{{param.parameterName}}</a-select-option>
                </a-select>
            </a-form-model-item> -->
            <a-form-model-item label="说明信息" prop="comments">
                <a-input v-model="form.comments" placeholder="请输入说明内容" />
            </a-form-model-item>
            <!-- <a-form-model-item label="状态">
                <a-switch :checked="form.open == 1 ? true : false" @change="onChangeShow" />
            </a-form-model-item> -->
        </a-form-model>

        <!-- <device-transfer :info="form" v-if="isShow" @cancel="isShow=false" @submit="getDevices" /> -->

    </show-modal>
</template>

<script>
import { rules } from './rules';
import {alarmTypes} from '../dictionary'
import DeviceTransfer from '@/views/components/deviceTransfer'
import {addInfo,updateInfo} from '@/api/notice/rule'
import {deepClone} from '@/utils'

export default {
    name: 'RuleInfo',
    components:{
        DeviceTransfer
    },
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        paramList:{
            type:Array,
            default:()=>[]
        },
        templateList:{
            type:Array,
            default:()=>[]
        },
        userList:{
            type:Array,
            default:()=>[]
        }
    },
    data() {
        return {
            loading: false,
            title: '规则信息',
            rules,
            alarmTypes,
            form: {
                notifyName: '',
                notifyCode:'',
                alarmType:undefined,
                templateCode:undefined,
                deviceCode:'',
                threshold:'',
                devicesString:'',
                devices:[],
                relaUser:[],
                relationField:undefined,
                resetValue:'',
                comments:''
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            isShow:false
        };
    },
    created() {
        this.form = {...this.form,...this.info}
        let {relaUser} = this.info;
        if(relaUser){
            let relaUserBox = relaUser.split(',')
            console.log(relaUserBox)
            this.form.relaUser = relaUserBox;
        }
    },
    methods: {
        //提交信息
        submit(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let form = deepClone(this.form);
                        let res = null
                        form.relaUser = form.relaUser.join(',')
                        delete form.devicesString;
                        if (form.ruleId) {
                            //编辑
                            res = await updateInfo(form);
                        } else {
                            //新增addInfo
                            res = await addInfo(form);
                        }
                        let {code} = res;
                        if(code==200){
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        }
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.open = 1;
            } else {
                this.form.open = 0;
            }
        },
       //添加的设备
        getDevices(e){
            let {devices} = e;
            this.dealHelmetData(devices)
            this.isShow = false;
        },
        //处理成 code name对象
        dealHelmetData(data){
            if(!data || !data.length){
                this.form.deviceCode = '';
                this.form.devices = []
                this.form.devicesString = '';
                return false;
            }
            let deviceBox = [];
            data.map(item=>{
                deviceBox.push(`${item.helmetCode}-${item.helmetName}`)
            })
            this.form.deviceCode = JSON.stringify(data);
            this.form.devices = data;
            this.form.devicesString = deviceBox.join(',');
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped></style>
